<template>
	<div>{{ prop.msg }}</div>
	<!-- 用户输入了新的内容 -->
	<input type="text" v-model="temp"/>
</template>

<script setup>
import { ref, watch } from 'vue'
// 父传子：父组件中的数据传递给子组件去使用（不能改）
// 声明自定义属性，接收的值是只读
const prop = defineProps(['msg'])
const temp = ref(prop.msg)
// 子通知父：子组件通知父组件去修改某个数据
// 声明自定义事件
const emits = defineEmits(['changMsgEvent'])
// 5秒之后触发changMsgEvent事件
// setTimeout(() => {
// 	console.log('触发changMsgEvent事件')
// 	emits('changMsgEvent', '今天是个好日子')
// }, 5000)
// 侦听temp的变化（用户输入引起的）
watch(temp, (newVal, oldVal) => {
	emits('changMsgEvent', newVal)
})
</script>

<style scoped>
	
</style>